<template>
    <div class="advertisement-pos-add-edit">
        <el-form ref="adPos" :model="adPos" :rules="rules" label-width="140px" :validate-on-rule-change="false">
            <el-form-item label="广告位名称：" prop="adPosName">
                <el-input v-model="adPos.adPosName"></el-input>
            </el-form-item>
            <el-form-item label="广告位简介：" prop="adPosIntro">
                <el-input type="textarea" v-model="adPos.adPosIntro"></el-input>
            </el-form-item>
            <el-form-item label="广告位类别：" prop="adPosCateId">
                <el-select v-model="adPos.adPosCateId" placeholder="请选择活动区域" @change="adPosCateIdOnchange">
                    <el-option v-for="(adPos, index) in adPosCateList" :key="index" :label="adPos.name" :value="adPos.value"></el-option>
                </el-select>
                <span class="desc">选择此广告位广告的形式</span>
            </el-form-item>
            <el-form-item label="广告位单价：" prop="adPosPrice">
                <el-input v-model="adPos.adPosPrice"></el-input>
                <span class="desc">枚金币/月</span>
            </el-form-item>
            <el-form-item label="是否启用：">
                <el-radio-group style="margin-top: 12px;" v-model="adPos.isUsed">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">不启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="showShowStyle" label="展示方式：">
                <el-radio-group style="margin-top: 12px;" v-model="adPos.showStyle">
                    <el-radio :label="1">可以发布多条广告并随机展示</el-radio>
                    <el-radio :label="2">只允许发布并展示一条广告</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="showWidthHeight" label="广告位宽度：" prop="width">
                <el-input v-model="adPos.width"></el-input>
                <span class="desc">像素</span>
            </el-form-item>
            <el-form-item v-if="showWidthHeight" label="广告位高度：" prop="height">
                <el-input v-model="adPos.height"></el-input>
                <span class="desc">像素</span>
            </el-form-item>
            <el-form-item v-if="!showWidthHeight" label="广告位字数：" prop="size">
                <el-input v-model="adPos.size"></el-input>
                <span class="desc">个字</span>
            </el-form-item>
            <el-form-item v-if="showWordsInput" label="广告位默认文字：" prop="words">
                <el-input v-model="adPos.words"></el-input>
            </el-form-item>
            <el-form-item v-else label="广告位默认图片："  prop="file">
                <el-upload
                        action="#"
                        :class="{'local-hide': adPos.fileList.length >= 1}"
                        :on-change="selectFile"
                        :file-list="adPos.fileList"
                        :multiple="false"
                        :limit="1"
                        list-type="picture-card"
                        :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                        >
                        <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                    </div>
                </el-upload>
                <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl">
                </el-dialog>
                <span class="desc">当没有广告可供展示时使用的默认图片，系统支持的图片格式为：gif,jpg,jpeg,png</span>
            </el-form-item>
            <el-form-item class="btn-wrapper">
                <el-button @click="$emit('cancel')">取消</el-button>
                <el-button type="primary" @click="submitAd('adPos')">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

	export default {
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				adPosCate: '',
				adPosCateList: [
                    {name: '图片', value: 0},
                    {name: '文字', value: 1},
                    {name: '幻灯', value: 2},
                    {name: 'Flash', value: 3}
                ],
				adPos: {
					adPosName: '',
					adPosIntro: '',
					adPosCateId: 0,
					adPosPrice: '',
					isUsed: 1,
					showStyle: 2,
					width: '',
					height: '',
					size: '',
					words: '',
					fileList: [],
				},
				rules: {
					adPosName: [
						{ required: true, message: '请输入广告位名称', trigger: 'blur' }
					],
					adPosIntro: [
						{ required: true, message: '请选择广告位简介', trigger: 'blur' }
					],
					adPosPrice: [
						{ required: true, message: '请输入广告位单价', trigger: 'blur' }
					],
					width: [
						{ required: true, message: '请输入广告位宽度', trigger: 'blur' }
					],
					height: [
						{ required: true, message: '请输入广告位高度', trigger: 'blur' }
					],
					fileList: [
						{ required: true, message: '请选择广告位默认图片' }
					]
				}
			}
		},
		props: {
			id: {
				type: Number,
				default: 0
			}
		},
		computed: {
			showWordsInput() {
				let adPosCateItem = this.adPosCateList.find(item => item.value == this.adPos.adPosCateId);
				return adPosCateItem.value == 1
			},
			showWidthHeight() {
				let adPosCateItem = this.adPosCateList.find(item => item.value == this.adPos.adPosCateId);
				return adPosCateItem.value != 1
			},
			showShowStyle() {
				let adPosCateItem = this.adPosCateList.find(item => item.value == this.adPos.adPosCateId);
				return adPosCateItem.value != 2
			}
		},
		methods: {
			adPosCateIdOnchange() {
				if (this.adPos.adPosCateId == 1) {
					this.rules = {
						adPosName: [
							{ required: true, message: '请输入广告位名称', trigger: 'blur' }
						],
						adPosIntro: [
							{ required: true, message: '请选择广告位简介', trigger: 'blur' }
						],
						adPosPrice: [
							{ required: true, message: '请输入广告位单价', trigger: 'blur' }
						],
						size: [
							{ required: true, message: '请输入广告位字数', trigger: 'blur' }
						],
						words: [
							{ required: true, message: '请输入广告位默认文字', trigger: 'blur' }
						]
					}
                } else {
					this.rules = {
						adPosName: [
							{ required: true, message: '请输入广告位名称', trigger: 'blur' }
						],
						adPosIntro: [
							{ required: true, message: '请选择广告位简介', trigger: 'blur' }
						],
						adPosPrice: [
							{ required: true, message: '请输入广告位单价', trigger: 'blur' }
						],
						width: [
							{ required: true, message: '请输入广告位宽度', trigger: 'blur' }
						],
						height: [
							{ required: true, message: '请输入广告位高度', trigger: 'blur' }
						],
						fileList: [
							{ required: true, message: '请选择广告位默认图片' }
						]
					}
                }
            },
			getAdPosDetail(id) {
				this.$http.get('/admin/advertising/index.php?act=advManager&op=getAdvSpaceById', {
					params: {
						ap_id: id
                    }
				}).then(res => {
					if (res.code == 1) {
						this.adPos.adPosName = res.data.ap_name;
						this.adPos.adPosIntro = res.data.ap_intro;
						this.adPos.adPosCateId = res.data.ap_class * 1;
						this.adPos.adPosPrice = res.data.ap_price * 1;
						this.adPos.isUsed = res.data.is_use * 1;
						this.adPos.showStyle = res.data.ap_display * 1;
						if (res.data.ap_class == 1) {
							this.adPos.size = res.data.ap_width * 1;
							this.adPos.words = res.data.default_content;
						} else {
							this.adPos.width = res.data.ap_width * 1;
							this.adPos.height = res.data.ap_height * 1;
							this.adPos.fileList.push({
								url: res.data.default_content
							});
						}
					} else {
						alert(res.msg);
					}
				})
			},
			computeCateText(val) {
				switch (val) {
					case 0:
						return '图片'
						break
					case 1:
						return '文字'
						break
					case 2:
						return '幻灯'
						break
					case 3:
						return 'Flash'
						break
				}
			},
			handleRemove(file) {
				let index = this.adPos.fileList.findIndex(item => item.url == file.url);
				this.adPos.fileList.splice(index, 1);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			selectFile(file, fileList) {
				this.adPos.fileList = fileList;
			},
			submitAd(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = new FormData();
						if (this.id) {
							data.append('ap_id', this.id);
                        }
						data.append('ap_name', this.adPos.adPosName);
						data.append('ap_intro', this.adPos.adPosIntro);
						data.append('ap_class', this.adPos.adPosCateId);
						data.append('ap_price', this.adPos.adPosPrice);
						data.append('is_use', this.adPos.isUsed);
						if (this.adPos.adPosCateId != 2) {
							data.append('ap_display', this.adPos.showStyle);
						}
						if (this.adPos.adPosCateId == 1) {
							data.append('ap_width', this.adPos.size);
							data.append('default_word', this.adPos.words);
                        } else {
							data.append('ap_width', this.adPos.width);
							data.append('ap_height', this.adPos.height);
							if (this.adPos.fileList.length) {
								let images = this.adPos.fileList.map(function(item) {
									return item.raw ? item.raw : item.url;
								});
								for (let i=0; i<images.length; i++) {
									data.append('ap_image', images[i]);
								}
							} else {
								this.$message({
									message: '请选择广告位默认图片',
									type: 'error'
								});
								return;
                            }
                        }
						this.$http.post('/admin/advertising/index.php?act=advManager&op=operateAdvSpace', data).then(res => {
							if (res.code == 1) {
								let message = '';
								if (this.id) {
									message = '编辑成功'
								} else {
									message = '新增成功'
								}
								this.$message({
									message: message,
									type: 'success'
								});
								this.$emit('addEditSuccess');
								this.$emit('cancel')
							}
							else {
								alert(res.msg);
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		created() {
			if (this.id) {
				this.getAdPosDetail(this.id);
			}
		},
		name: "advertisement-pos-add-edit"
	}
</script>

<style lang="scss" scoped>
    .advertisement-add-edit {
        padding: 0 20px;
    }
    /deep/ .el-form-item {
        padding-top: 22px;
        .el-form-item__content {
            display: flex;
            align-items: center;
            .el-input {
                width: 400px;
            }
            .el-textarea {
                width: 400px;
            }
            .desc {
                margin-left: 30px;
            }
        }
    }
    /deep/ .local-hide .el-upload--picture-card {
        display: none;
    }
</style>
